<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <div id="container">
        <label for="message">Message</label>
        <input type="text" class="input" id="message" name="message">
        <p id="result"></p>
    </div>

    <div id="container2">
        <span>Status:</span>
        <input type="radio" id="pending" name="status">
        <label for="pending">Pending</label>
        <input type="radio" id="resolved" name="status">
        <label for="resolved">Resolved</label>
        <input type="radio" id="rejected" name="status">
        <label for="rejected">Rejected</label>
        <p id="result2"></p>
    </div>

    <div id="container3">
        <label for="status">Web Technology:</label>
        <input type="checkbox" id="html"> HTML
        <input type="checkbox" id="css"> CSS
        <input type="checkbox" id="js"> JavaScript
        <p id="result3"></p>
    </div>

    <div id="container">
        <select id="lang">
            <option value="">Select a language</option>
            <option value="JavaScript">JavaScript</option>
            <option value="TypeScript">TypeScript</option>
            <option value="PHP">PHP</option>
            <option value="Python">Python</option>
            <option value="Java">Java</option>
        </select>
        <p id="result4"></p>
    </div>
    <div id="container">
        <label for="message">Message</label>
        <input placeholder="Enter some text" id="message5" name="message">
        <p id="result5"></p>
    </div>
    <script>
        let input = document.querySelector(".input");
        let result = document.querySelector("#result");
        input.addEventListener("input", function () {
            result.textContent = input.value;
        });
        let result2 = document.querySelector('#result2');
        document.body.addEventListener('change', function (e) {
            let target = e.target;
            let message;
            switch (target.id) {
                case 'pending':
                    message = 'The Pending radio button changed';
                    break;
                case 'resolved':
                    message = 'The Resolved radio button changed';
                    break;
                case 'rejected':
                    message = 'The Rejected radio button changed';
                    break;
            }
            result.textContent = message;
        });


        let result3 = document.querySelector('#result3');

        document.body.addEventListener('change', function (e) {
            let target = e.target;
            let message;

            switch (target.id) {
                case 'html':
                    message = 'The HTML checkbox changed';
                    break;
                case 'css':
                    message = 'The CSS checkbox changed';
                    break;
                case 'js':
                    message = 'The JavaScript checkbox changed';
                    break;
            }
            result3.textContent = message;
        });


        let select = document.querySelector('#lang');
        let result4 = document.querySelector('#result4');
        select.addEventListener('change', function () {
            result4.textContent = this.value;
        });

        const message5 = document.querySelector('#message5');
        const result5 = document.querySelector('#result5');
        message5.addEventListener('input', function () {
            result5.textContent = this.value;
        });
    </script>

</body>

</html>